<template>
  <demoBlock title="填充模式" padding class="demo-image">
    <vcu-flexbox gutter="20" class="vcu-text-center">
      <vcu-flexbox-item v-for="fit in fits" span="8" :key="fit" class="mb-10">
        <vcu-image :fit="fit" width="100%" height="27vw" :src="imageUrl" />
        <div class="text">{{ fit }}</div>
      </vcu-flexbox-item>
    </vcu-flexbox>
  </demoBlock>
</template>

<script>
import { defineComponent, getCurrentInstance, ref, computed } from "vue";

export default defineComponent({
  setup() {
    const fits = ["contain", "cover", "fill", "none", "scale-down"];
    const { proxy } = getCurrentInstance();
    const imageUrl = computed(() => {
      return `${proxy.serverIp}/images/car.jpg`;
    });

    return { fits, imageUrl };
  },
});
</script>
